<template>
  <div class="question-wrap">
    <div class="question-head">
      <div class="question-circle">
        <label v-for="(item,index) in this.circle">
          <span :class="item"></span>
        </label>
      </div>
      <img class="head-img" :src="headline?headline:'/static/imgs/headline.png'"  />
    </div>
    <div class="problem-wrap">
      <div class="problem-top">
        <h1>
          <span :class="this.index" class="problem-index"></span>
          <span class="problem">
            {{this.question.question}}
          </span>
        </h1>
        <div class="img-div"><div class="check-img" v-show="this.img" @click="checkimg"></div></div>
      </div>
      <div v-if="question" class="problem-content" :class="this.selected">
        <div class="answer">
          <input type="radio" name="question" value="A" @click="checkanswer"/>
          <span>{{this.question.choice[0]}}</span>
        </div>
        <div class="answer">
          <input type="radio" name="question" value="B" @click="checkanswer"/>
          <span>{{this.question.choice[1]}}</span>
        </div>
        <div class="answer">
          <input type="radio" name="question" value="C" @click="checkanswer"/>
          <span>{{this.question.choice[2]}}</span>
        </div>
        <div class="answer">
          <input type="radio" name="question" value="D" @click="checkanswer"/>
          <span>{{this.question.choice[3]}}</span>
        </div>
      </div>
  </div>
  <div class="question-footer">
    <img v-if="this.last" class="nextques" src="./result.png" @click="submit"/>
    <img v-else class="nextques" src="./nextques.png" @click="next"/>
    <img v-if="this.last" src="./desk5.png" class="desk" />
    <img v-else src="./desk.png" class="desk"/>
  </div>
  <showImage :imgurl="this.img" v-show="checkimage" v-on:getimg="showimg"></showImage>
  </div>
</template>
<script type="text/ecmascript-6">
  import showImage from 'components/showImage/showImage';
  export default {
    data() {
      return {
        last: '',
        checkimage: '',
        circle: [ 'span-none', 'span-none', 'span-none', 'span-none', 'span-none' ],
        index: '',
        data: '',
        question: '',
        num: 0,
        img: '',
        selected: '',
        correct_num: 0,
        answer: [],
        headline: ''
      };
    },
    created() {
      var url = 'fiveques/getexaminfo/?';
        if (this.$route.query.exam_id !== 'undefined' && this.$route.query.exam_id) {
          url = url + 'exam_id=' + this.$route.query.exam_id;
        } else {
          url = url + 'exam_id=' + 2;
        }
        if (this.$route.query.source !== 'undefined' && this.$route.query.source) {
          url = url + '&source=' + this.$route.query.source;
        }
        this.$http.get(url).then((response) => {
          this.data = response.body.data;
          this.question = this.data.ques_info.ques_info[0];
          this.img = this.data.ques_info.ques_info[0].img_url;
          this.answer = this.data.ques_info.answer;
          this.index = 'index-' + this.num;
          this.headline = response.body.data.ques_info.minititle_img;
        });
    },
    methods: {
      showimg(msg) {
        this.checkimage = msg;
      },
      checkimg() {
        this.checkimage = 'true';
      },
      next() {
        if (this.selected !== 'disable') {
          return;
        } else {
          this.num = this.num + 1;
          this.question = this.data.ques_info.ques_info[this.num];
          this.img = this.data.ques_info.ques_info[this.num].img_url;
          if (this.num === 4) {
            this.last = 'true';
          }
          this.index = 'index-' + this.num;
          this.selected = '';
          var radio = document.getElementsByName('question');
          for (let j = 0; j < radio.length; j++) {
            radio[j].setAttribute('class', '');
          }
        }
      },
      checkanswer() {
        var radio = document.getElementsByName('question');
        for (let j = 0; j < radio.length; j++) {
          if (radio[j].checked) {
            if (radio[j].value === this.answer[this.num]) {
              radio[j].setAttribute('class', 'right');
              this.circle[this.num] = 'span-true';
              this.correct_num = this.correct_num + 1;
            } else {
              radio[j].setAttribute('class', 'wrong');
              this.circle[this.num] = 'span-false';
            }
            break;
          }
        }
        this.selected = 'disable';
      },
      clean() {
        this.circle = [ 'span-none', 'span-none', 'span-none', 'span-none', 'span-none' ];
        this.question = this.data.ques_info.ques_info[0];
        this.selected = '';
        this.last = '';
        this.num = 0;
        this.index = 'index-0';
        this.correct_num = 0;
        var radio = document.getElementsByName('question');
          for (let j = 0; j < radio.length; j++) {
            radio[j].setAttribute('class', '');
        }
      },
      submit() {
        if (this.selected !== 'disable') {
          return;
        } else {
          var data = {op_id: window.localStorage.opt_id, correct_num: this.correct_num};
          if (this.$route.query.exam_id !== 'undefined' && this.$route.query.exam_id) {
            data.exam_id = this.$route.query.exam_id;
          } else {
            data.exam_id = 2;
          }
          if (this.$route.query.source !== 'undefined' && this.$route.query.source) {
            data.source = this.$route.query.source;
          }
          if (this.$route.query.spread_level !== 'undefined' && this.$route.query.spread_level) {
            data.spread_level = this.$route.query.spread_level;
          } else {
            data.spread_level = 1;
          }
          this.$http.post('fiveques/getexam/', data).then((response) => {
            this.$emit('showres', 'true');
            this.clean();
          });
        }
      }
    },
    components: {
      showImage
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  .question-wrap
    display flex
    flex-direction column
    justify-content space-between
    align-items center
    position absolute
    height 100%
    width 100%
    .question-head
      width 100%
      height auto
      .question-circle
        display flex
        justify-content space-between
        padding-left 8%
        padding-right 8%
        margin-top 8px
        .span-none
          display inline-block
          width 45px
          height 45px
          border 3px solid rgb(47,73,157)
          border-radius 50%
          background-color white
        .span-false
          display inline-block
          width 45px
          height 45px
          border 3px solid rgb(47,73,157)
          border-radius 50%
          background-color rgb(234,234,234)
          background-image url(false.png)
          background-size 100%
        .span-true
          display inline-block
          width 45px
          height 45px
          border 3px solid rgb(47,73,157)
          border-radius 50%
          background-color rgb(234,234,234)
          background-image url(true.png)
          background-size 100%

    .head-img
      height auto
      width 84%
      margin-top 15px
      left 8%
    .question-footer
      .desk
        width: 88%;
        height: auto;
        margin-bottom -5px
      .nextques
        height auto
        width 64%
    .problem-wrap
      width 86%
      background-color rgb(255,255,255)
      border-radius 15px
      flex-flow column
      flex-grow 1
      margin-top 15px
      margin-bottom 10px
      border 3px solid rgb(47,73,157)
      border-bottom-right-radius 15px
      border-bottom-left-radius 15px
      position: relative;
      .problem-top:after
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        border-top: 3px solid rgb(47,73,157);
        content: " ";
      .problem-top
        height 35%
        width 100%
        background url(problem.png)
        background-size 100%
        position absolute
        border-top-right-radius 15px
        border-top-left-radius 15px
        h1
          display flex
          .problem-index
            display inline-block
            margin-top 10px
            margin-left 2%
            min-width 37px
            height 28px
          .index-0
            background url(Q1.png)
            background-size 100%
          .index-1
            background url(Q2.png)
            background-size 100%
          .index-2
            background url(Q3.png)
            background-size 100%
          .index-3
            background url(Q4.png)
            background-size 100%
          .index-4
            background url(Q5.png)
            background-size 100%
          .problem
            display inline-block
            color rgb(35,52,139)
            font-size 14px
            font-weight bold
            font-family PingFangSC-Medium
            line-height 22px
            margin 12px 8px 0 10px
            text-align left
        .img-div
          position absolute
          min-height 15px
          width 100%
          bottom 7px
        .check-img
          width 80px
          height 28px
          text-align center
          margin 5px 15px 6px auto
          background url(checkimg.png)
          background-size 100%
      .disable
        input
          pointer-events none
      .problem-content
        position absolute
        top 35%
        width 100%
        height 65%
        .answer
          padding-left 10px
          padding-right 10px
          height: 20%
          padding-top: 10px;
          display flex
          span
            line-height 18px
            font-size 14px
            color rgb(35,52,139)
            font-family PingFangSC-Medium
            font-weight bold
            margin-left 15px
            text-align left
          input
            min-width 37px
            height 35px
            appearance none
            background url(none.png)
            background-size 100% 100%
            background-repeat no-repeat
            margin-top -7px
            &.right
              background url(right.png)
              background-size 100% 100%
              background-repeat no-repeat
            &.wrong
              background url(wrong.png)
              background-size 100% 100%
              background-repeat no-repeat
</style>
